<script setup lang="js">
import { ref } from 'vue'

import { RouterLink, RouterView, useRouter } from 'vue-router'
import { useAccountStore } from "@/stores/accountInfo";
import { BannerSearch } from "@/api/banner";

const router = useRouter()
const account = useAccountStore();

if (account.currentInfo === null) {
  router.push({ path: '/login' })
}

//跳转主菜单
const jumpIntoUserList = () => {
  router.push({ path: '/DashBoard' })
}

const curPage = ref({
  divisionId: 1,
  url: '',
})

const getBaner = () => {
  BannerSearch(curPage.value).then(res => {
    curPage.value.url = res.data.url
  })
}
getBaner()
</script>

<template>
  <div>
    <el-image :src="curPage.url"></el-image>
    <el-text class="position-2-btn" type="primary" size="large" v-if="account.currentRole === 'admin'">欢迎您，管理员 {{
      account.currentInfo.name
    }}！</el-text>
    <el-text class="position-2-btn" type="primary" size="large" v-if="account.currentRole === 'user'">欢迎您，用户 {{
      account.currentInfo.name }}！</el-text>
    <div>
      <el-button type="primary" @click="jumpIntoUserList" class="position-1-btn">进入官网</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.position-1-btn {
  position: absolute;
  top: 150px;
  left: 800px;
}

.position-2-btn {
  position: absolute;
  top: 100px;
  left: 800px;
}

.position-3-btn {
  position: absolute;
  top: 250px;
  left: 100px;
}
</style>